<template>
  <a-drawer
    :visible="visible"
    placement="right"
    :title="title"
    :width="500"
    @close="onClose"
  >
    <component 
      :is="getChartSettingsComponent()"
      :chart-type="chartType"
      :chart-id="chartId"
      :chart-options="chartOptions"
      :chart-title="chartTitle"
      @save="handleSave"
    />
    
    <template #footer>
      <div style="text-align: right">
        <a-button style="margin-right: 8px" @click="onClose">取消</a-button>
        <a-button type="primary" @click="saveSettings">保存</a-button>
      </div>
    </template>
  </a-drawer>
</template>

<script setup lang="ts">
import { ref, computed, defineProps, defineEmits, markRaw, watch } from 'vue';
import { Drawer } from 'ant-design-vue';

// 导入已创建的图表设置组件
import BarChartSettings from './chart-settings/BarChartSettings.vue';
import LineChartSettings from './chart-settings/LineChartSettings.vue';
import PieChartSettings from './chart-settings/PieChartSettings.vue';
import ScatterChartSettings from './chart-settings/ScatterChartSettings.vue';
import AreaChartSettings from './chart-settings/AreaChartSettings.vue';
import RadarChartSettings from './chart-settings/RadarChartSettings.vue';
import FunnelChartSettings from './chart-settings/FunnelChartSettings.vue';
import HeatmapChartSettings from './chart-settings/HeatmapChartSettings.vue';
import GaugeChartSettings from './chart-settings/GaugeChartSettings.vue';
import TreemapChartSettings from './chart-settings/TreemapChartSettings.vue';
import HorizontalBarChartSettings from './chart-settings/HorizontalBarChartSettings.vue';
import WordCloudChartSettings from './chart-settings/WordCloudChartSettings.vue';
import MetricChartSettings from './chart-settings/MetricChartSettings.vue';
import TableChartSettings from './chart-settings/TableChartSettings.vue';
// 导入默认设置组件，用于尚未实现的图表类型
import DefaultChartSettings from './chart-settings/DefaultChartSettings.vue';

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  chartType: {
    type: String,
    required: true
  },
  chartId: {
    type: String,
    required: true
  },
  chartOptions: {
    type: Object,
    required: true
  },
  chartTitle: {
    type: String,
    default: ''
  }
});

const emit = defineEmits(['close', 'save']);

// 当前编辑的选项
const currentOptions = ref<any>({});

// 根据图表类型动态加载对应的设置组件
const settingsComponent = computed(() => {
  const componentMap: Record<string, any> = {
    'bar': markRaw(BarChartSettings),
    'line': markRaw(LineChartSettings),
    'pie': markRaw(PieChartSettings),
    'scatter': markRaw(ScatterChartSettings),
    'area': markRaw(AreaChartSettings),
    'radar': markRaw(RadarChartSettings),
    'funnel': markRaw(FunnelChartSettings),
    'heatmap': markRaw(HeatmapChartSettings),
    'gauge': markRaw(GaugeChartSettings),
    'treemap': markRaw(TreemapChartSettings),
    'horizontal-bar': markRaw(HorizontalBarChartSettings),
    'word-cloud': markRaw(WordCloudChartSettings),
    'metric': markRaw(MetricChartSettings),
    'table': markRaw(TableChartSettings)
  };
  
  return componentMap[props.chartType] || markRaw(DefaultChartSettings);
});

// 标题
const title = computed(() => {
  return `图表设置 - ${props.chartTitle || props.chartId}`;
});

// 初始化
const initDrawer = () => {
  // 深拷贝选项，避免直接修改原对象
  currentOptions.value = JSON.parse(JSON.stringify(props.chartOptions));
};

// 更新选项
const updateOptions = (newOptions: any) => {
  currentOptions.value = newOptions;
};

// 保存设置
const saveSettings = () => {
  emit('save', {
    chartId: props.chartId,
    options: currentOptions.value
  });
  onClose();
};

// 关闭抽屉
const onClose = () => {
  emit('close');
};

// 监听visible变化，初始化抽屉
watch(() => props.visible, (val) => {
  if (val) {
    initDrawer();
  }
});

// 获取对应的图表设置组件
const getChartSettingsComponent = () => {
  const componentMap = {
    'bar': BarChartSettings,
    'line': LineChartSettings,
    'pie': PieChartSettings,
    'scatter': ScatterChartSettings,
    'area': AreaChartSettings,
    'radar': RadarChartSettings,
    'funnel': FunnelChartSettings,
    'heatmap': HeatmapChartSettings,
    'treemap': TreemapChartSettings,
    'horizontal-bar': HorizontalBarChartSettings,
    'word-cloud': WordCloudChartSettings,
    'gauge': GaugeChartSettings,
    'metric': MetricChartSettings,
    'table': TableChartSettings
  };
  
  return componentMap[props.chartType] || DefaultChartSettings;
};
</script>

<style scoped>
/* 可以添加自定义样式 */
</style> 